<template>
  <ApplicationEditor id="app" ref="app">
  </ApplicationEditor>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import ApplicationEditor from '@/components/application-editor/ApplicationEditor.vue'
import { saveAs } from 'file-saver'
import localforage from 'localforage'
import Jszip from 'jszip'

@Component({
  components: {ApplicationEditor },
})
export default class App extends Vue {

  @Ref()
  private app!: ApplicationEditor

  handleBtnClick () {
    const zip = new Jszip()
    zip.file('Hello.txt', 'Hello World\n')
    zip.generateAsync({type:"blob"}).then(function(content) {
        // see FileSaver.js
        localforage.setItem('example.zip', content)
        saveAs(content, "example.zip");
    })
  }

  async handleBtnClick2 () {
    const zip = new Jszip()
    const blob = await localforage.getItem('example.zip')
    const file = new File([blob as Blob], 'example.zip')
    const res = await zip.loadAsync(file)
    console.log(res)
  }
}
</script>

<style lang="scss">
html,
body,
#app {
  height: 100%;
  // background-image: url('./参考.jpg');
}

body {
  margin: 0;
  font-family: Microsoft YaHei, Avenir, Helvetica, Arial, sans-serif;
}
</style>
